<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:rich="http://richfaces.org/rich">
    <h:head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
        <title>Cobrar Crédito</title>
    </h:head> 
    <ui:composition template="./../../resources/template/facesTemplate.xhtml">

        <ui:define name="content">
            <h:body>
                <h:form id="frm">
                    <div>
                        <fieldset>
                            <h3><h:outputText value="#{loginBean.ubicacion}"/></h3>
                            <h:panelGroup rendered="#{pagoBean.pago.cliente eq null}">
                                <div class="centrado"><label for="moto">Moto Nº: </label>
                                    <h:inputText id="moto" size="4" maxlength="11" styleClass="d_num" value="#{pagoBean.moto}"/>
                                    <rich:messages for="frm:moto"/>
                                    <label for="cliente">Cliente: </label>
                                    <h:inputText id="cliente" size="50" maxlength="50" value="#{pagoBean.pago.cliente}"/>
                                    <rich:messages for="frm:cliente"/>
                                </div>
                                <div class="botonera">
                                    <h:commandButton id="consultarCliente" styleClass="submit" type="submit" action="#{pagoBean.obtenerCliente()}" value="Consultar"/>
                                </div>
                            </h:panelGroup>
                            <h:panelGroup rendered="#{pagoBean.pago.cliente ne null}">
                                <h:panelGroup id="panelCliente">

                                    <div class="centrado">
                                        <hr/>
                                        <h3>Seleccione un Cliente</h3>
                                        <table class="tablaDatos">
                                            <thead>
                                                <tr>
                                                    <th></th>
                                                    <th>Nº</th>
                                                    <th>Nombre</th>
                                                    <th>Documento</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                <h:panelGroup rendered="#{not empty pagoBean.listaClientes}">
                                                    <ui:repeat value="#{pagoBean.listaClientes}" var="cli">
                                                        <tr>
                                                            <td>
                                                                <h:commandLink value="Seleccionar" action="#{pagoBean.obtenerCreditosParaElCobro()}">
                                                                    <f:setPropertyActionListener target="#{pagoBean.pago.cliente}" value="#{cli.documento}"/>
                                                                </h:commandLink>
                                                            </td>
                                                            <td>
                                                                <h:outputText value="#{cli.id}"/>
                                                            </td>
                                                            <td>
                                                                <h:outputText value="#{cli.nombre}"/>
                                                            </td>
                                                            <td>
                                                                <h:outputText value="#{cli.documento}">
                                                                    <f:convertNumber pattern="#{pagoBean.numberPattern}"/>
                                                                </h:outputText>
                                                            </td>
                                                        </tr>
                                                    </ui:repeat>
                                                </h:panelGroup>
                                                <h:panelGroup rendered="#{empty pagoBean.listaClientes}">
                                                    No se encontraron registros
                                                </h:panelGroup>
                                            </tbody>
                                        </table>
                                    </div>
                                </h:panelGroup>
                            </h:panelGroup>
                            <h:panelGroup id="panelCredito">
                                <h:panelGroup rendered="#{not empty pagoBean.creditos}">
                                    <div class="centrado">
                                        <hr/>
                                        <h3>Seleccione un Crédito</h3>
                                        <table class="tablaDatos">
                                            <thead>
                                                <tr>
                                                    <th></th>
                                                    <th>Nº</th>
                                                    <th>Venta</th>
                                                    <th>Fecha Inicio</th>
                                                    <th>Fecha Fin</th>
                                                    <th>Crédito Total</th>
                                                    <th>Total Pagado</th>
                                                    <th>Último Pago el</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                <ui:repeat value="#{pagoBean.creditos}" var="row">
                                                    <tr>
                                                        <td>
                                                            <h:commandLink value="Seleccionar" action="#{pagoBean.seleccionarCredito()}">
                                                                <f:setPropertyActionListener target="#{pagoBean.creditoSeleccionado}" value="#{row.id}"/>
                                                            </h:commandLink>
                                                        </td>
                                                        <td>
                                                            <h:outputText value="#{row.id}"/>
                                                        </td>
                                                        <td>
                                                            <h:outputText value="#{row.transaccion.id}"/>
                                                        </td>
                                                        <td>
                                                            <h:outputText value="#{row.fechaInicio}">
                                                                <f:convertDateTime pattern="dd/MM/yyyy"/>
                                                            </h:outputText>
                                                        </td>
                                                        <td>
                                                            <h:outputText value="#{row.fechaFin}">
                                                                <f:convertDateTime pattern="dd/MM/yyyy"/>
                                                            </h:outputText>
                                                        </td>
                                                        <td>
                                                            <h:outputText value="#{row.creditoTotal}">
                                                                <f:convertNumber pattern="#{pagoBean.monedaPattern}"/>
                                                            </h:outputText>
                                                        </td>
                                                        <td>
                                                            <h:outputText value="#{row.totalAmortizadoPagado+row.totalInteresesPagado}">
                                                                <f:convertNumber pattern="#{pagoBean.monedaPattern}"/>
                                                            </h:outputText>
                                                        </td>
                                                        <td>
                                                            <h:outputText value="#{row.fechaUltimoPago}">
                                                                <f:convertDateTime pattern="dd/MM/yyyy"/>
                                                            </h:outputText>
                                                        </td>
                                                    </tr>
                                                </ui:repeat>
                                            </tbody>
                                        </table>
                                        <hr/>
                                    </div>
                                </h:panelGroup>
                                <h:panelGroup rendered="#{ empty pagoBean.creditos}">
                                    <div class="centrado"><h4>No se encontraron créditos abiertos.</h4></div>
                                </h:panelGroup>
                            </h:panelGroup>
                            <h:panelGroup rendered="#{pagoBean.pago.credito.id ne null}">
                                <div class="resumen">
                                    <table>
                                        <thead><h3>Datos del Cliente</h3></thead>
                                        <tr>
                                            <th>Documento</th><td><h:outputText value="#{pagoBean.pago.credito.transaccion.comprador.documento}"/></td>
                                        </tr>
                                        <tr>
                                            <th>Nombre</th><td><h:outputText value="#{pagoBean.pago.credito.transaccion.comprador.nombre}"/></td>
                                        </tr>
                                        <tr>
                                            <th>Dirección 1</th><td><h:outputText value="#{pagoBean.pago.credito.transaccion.comprador.direccion1}"/></td>
                                        </tr>
                                        <tr>
                                            <th>Dirección 2</th><td><h:outputText value="#{pagoBean.pago.credito.transaccion.comprador.direccion2}"/></td>
                                        </tr>
                                        <tr>
                                            <th>Teléfono Fijo</th><td><h:outputText value="#{pagoBean.pago.credito.transaccion.comprador.telefonoFijo}"/></td>
                                        </tr>
                                        <tr>
                                            <th>Teléfono Móvil</th><td><h:outputText value="#{pagoBean.pago.credito.transaccion.comprador.telefonoMovil}"/></td>
                                        </tr>
                                    </table>
                                    <table>
                                        <thead><h3>Datos del Crédito</h3></thead>
                                        <tr>
                                            <th>Nº</th><td><h:outputText value="#{pagoBean.pago.credito.id}"/></td>
                                            <th>Capital</th><td><h:outputText value="#{pagoBean.pago.credito.capital}">
                                                    <f:convertNumber pattern="#{ventaMotosBean.monedaPattern}"/>
                                                </h:outputText></td>
                                            <th>Amortización</th><td><h:outputText value="#{pagoBean.pago.credito.amortizacion}"/></td>
                                        </tr>
                                        <tr>
                                            <th>Total Pagado</th><td><h:outputText value="#{pagoBean.pago.credito.totalAmortizadoPagado + 
                                                                                            pagoBean.pago.credito.totalInteresesPagado +
                                                                                            pagoBean.pago.credito.totalInteresesPagadoMulta}">
                                                    <f:convertNumber pattern="#{ventaMotosBean.monedaPattern}"/>
                                                </h:outputText></td>
                                            <th>Crédito Total</th><td><h:outputText value="#{pagoBean.pago.credito.creditoTotal}">
                                                    <f:convertNumber pattern="#{ventaMotosBean.monedaPattern}"/>
                                                </h:outputText>
                                            </td>
                                            <th>Tasa Moratoria</th><td><h:outputText value="#{pagoBean.pago.credito.interesMoratorioString}"/></td>
                                        </tr>
                                        <tr>
                                            <th>Fecha Inicio</th><td><h:outputText value="#{pagoBean.pago.credito.fechaInicio}">
                                                    <f:convertDateTime pattern="#{ventaMotosBean.fechaCortaPattern}"/>
                                                </h:outputText></td>
                                            <th>Fecha Fin</th><td><h:outputText value="#{pagoBean.pago.credito.fechaFin}">
                                                    <f:convertDateTime pattern="#{ventaMotosBean.fechaCortaPattern}"/>
                                                </h:outputText></td>
                                            <th>Ultimo Pago el</th><td><h:outputText value="#{pagoBean.pago.credito.fechaUltimoPago}">
                                                    <f:convertDateTime pattern="#{ventaMotosBean.fechaCortaPattern}"/>
                                                </h:outputText></td>
                                        </tr>
                                        <h:panelGroup rendered="#{pagoBean.pago.credito.garante ne null}">
                                            <tr><th colspan="6">Datos del Garante</th></tr>
                                            <tr>
                                                <td colspan="6" style="padding:0px;">
                                                    <table style="margin: 0px; border: none;">
                                                        <tr>
                                                            <th>Documento</th><td><h:outputText value="#{pagoBean.pago.credito.garante.documento}"/></td>
                                                        </tr>
                                                        <tr>
                                                            <th>Nombre</th><td><h:outputText value="#{pagoBean.pago.credito.garante.nombre}"/></td>
                                                        </tr>
                                                        <tr>
                                                            <th>Dirección 1</th><td><h:outputText value="#{pagoBean.pago.credito.garante.direccion1}"/></td>
                                                        </tr>
                                                        <tr>
                                                            <th>Dirección 2</th><td><h:outputText value="#{pagoBean.pago.credito.garante.direccion2}"/></td>
                                                        </tr>
                                                        <tr>
                                                            <th>Teléfono Fijo</th><td><h:outputText value="#{pagoBean.pago.credito.garante.telefonoFijo}"/></td>
                                                        </tr>
                                                        <tr>
                                                            <th>Teléfono Móvil</th><td><h:outputText value="#{pagoBean.pago.credito.garante.telefonoMovil}"/></td>
                                                        </tr>
                                                    </table>
                                                </td>
                                            </tr>
                                        </h:panelGroup>
                                    </table>
                                </div>
                                <div class="botonera">
                                    <h:commandButton type="button" action="#{pagoBean.calcularPonerseAlDia()}" value="Ponerse al Dia">
                                        <f:ajax render="panelDetalle"/>
                                    </h:commandButton>&#160;
                                    <h:commandButton type="button" action="#{pagoBean.calcularPorMontoAPagar()}" value="Calcular Por Monto">
                                        <f:ajax render="panelDetalle"/>
                                    </h:commandButton>&#160;
                                    <h:commandButton type="button" action="#{pagoBean.calcularParaCancelar()}" value="Calcular para Cancelar">
                                        <f:ajax render="panelDetalle"/>
                                    </h:commandButton>
                                </div>
                            </h:panelGroup>
                            <h:panelGroup id="panelDetalle">
                                <h:panelGroup rendered="#{pagoBean.calcularPorMonto}">
                                    <div class="centrado"><div><label for="montoAPagar">Monto a Pagar: </label></div>
                                        <div><h:inputText id="montoAPagar" size="11" maxlength="20" styleClass="d_num"
                                                          value="#{pagoBean.montoSolicitado}" immediate="true"/>
                                            <rich:messages for="frm:montoAPagar"/>
                                        </div>
                                    </div>
                                    <h:commandButton id="calcularPorMonto" styleClass="submit" type="submit" 
                                                     action="#{pagoBean.calcularTeniendoMontoAPagar()}"
                                                     value="Calcular"/>

                                </h:panelGroup>
                                <h:panelGroup rendered="#{not empty pagoBean.pago.detalle}">
                                    <div class="dosTablas">
                                        <div class="tablaCompartida resumen izquierda">
                                            <table class="tablaDatos">
                                                <thead>
                                                    <h3>Financiación</h3>
                                                </thead>
                                                <tr>
                                                    <th width="5px">Nº</th>
                                                    <th width="10px">Vencimiento</th>
                                                    <th width="10px">Monto</th>
                                                    <th width="5px">Pagado</th>
                                                </tr>
                                                <tbody>
                                                    <ui:repeat value="#{pagoBean.listaFinanciacion}" var="f">
                                                        <tr>
                                                            <td><h:outputText value="#{f.numeroCuota}"/></td>
                                                            <td><h:outputText value="#{f.fechaVencimiento}">
                                                                    <f:convertDateTime pattern="#{pagoBean.fechaCortaPattern}"/>
                                                                </h:outputText>
                                                            </td>
                                                            <td><h:outputText value="#{f.totalAPagar}">
                                                                    <f:convertNumber pattern="#{pagoBean.monedaPattern}"/>
                                                                </h:outputText></td>
                                                            <td><h:outputText value="#{f.fechaPago}">
                                                                    <f:convertDateTime pattern="#{pagoBean.fechaCortaPattern}"/>
                                                                </h:outputText></td>
                                                        </tr>
                                                    </ui:repeat>
                                                </tbody>
                                            </table>
                                        </div>
                                        <div class="tablaCompartida derecha">
                                            <table class="tablaDatos">
                                                <thead>
                                                    <h3>Detalle del Pago</h3>
                                                    <tr>
                                                        <th></th>
                                                        <th>Concepto</th>
                                                        <th>Vencimiento</th>
                                                        <th>Importe</th>
                                                    </tr>
                                                </thead>
                                                <tbody>
                                                    <ui:repeat value="#{pagoBean.pago.detalle}" var="r">
                                                        <tr class="#{r.claseColor}">
                                                            <td>
                                                                <h:selectBooleanCheckbox id="seleccion" value="#{r.seleccion}" disabled="#{pagoBean.habilitarParaExcluir}">
                                                                    <f:ajax event="change" listener="#{pagoBean.calcularTotalAPagar()}" render="@form"/>
                                                                </h:selectBooleanCheckbox>
                                                            </td>
                                                            <td>
                                                                <h:outputText value="#{r.concepto}"/>
                                                            </td>
                                                            <td>
                                                                <h:outputText value="#{r.vencimiento}">
                                                                    <f:convertDateTime pattern="#{pagoBean.fechaCortaPattern}"/>
                                                                </h:outputText>
                                                            </td>
                                                            <td align="right">
                                                                <h:outputText value="#{r.importe}">
                                                                    <f:convertNumber pattern="#{pagoBean.monedaPattern}"/>
                                                                </h:outputText>
                                                            </td>
                                                        </tr>
                                                    </ui:repeat>
                                                </tbody>
                                                <tfoot style="font-size: 14px; font-weight: bold; color: black;">
                                                    <tr>
                                                        <td colspan="3"><b>TOTAL</b></td>
                                                        <td align="right"><h:outputText value="#{pagoBean.pago.totalPagado}">
                                                                <f:convertNumber pattern="#{pagoBean.monedaPattern}"/>
                                                            </h:outputText></td>
                                                    </tr>
                                                </tfoot>
                                            </table>
                                        </div>
                                    </div>
                                    <div class="botonera">
                                        <hr/>
                                        <h:commandLink styleClass="linkRojo" action="#{pagoBean.confirmarPagoYGenerarRecibo()}" target="_blank" value="Confirmar Pago e Imprimir el Recibo"/>
                                        <hr/>
                                        <h:commandButton value="Nueva Búsqueda" action="cobrarCredito" immediate="true"/>
                                        <h:commandButton value="Cancelar" action="main" immediate="true"/>
                                    </div>
                                </h:panelGroup>
                                <h:panelGroup rendered="#{empty pagoBean.pago.detalle}">
                                    <div class="centrado"><h4>No se encontraron cuotas.</h4></div>
                                </h:panelGroup>
                            </h:panelGroup>
                        </fieldset>
                    </div>        
                </h:form>
            </h:body>
        </ui:define>
    </ui:composition>
</html>
